<template>
	<view>
		<!-- <view class="title" style="font-weight: 800;" v-if="!canSee">自定义字段 </view> -->
		<view v-for="(item,index) in zdyList" :key="index">
			<view v-if="item.type == 'text'">
				<view class="title">
					<div class="titleSub">
						<div v-if="canSee">
							<span class="commonName">{{item.name}}</span>
							:
							<span class="commonValue">{{item.value}}</span>
						</div>
						<div v-if="!canSee" class="titleSubLeft">{{index+1}}.</div>
						<input v-if="!canSee" v-model="item.name" class="infoBoxItemLeft" placeholder="请输入自定义字段名称" />
					</div>
					<button v-if="!canSee" class="deleteButton" @click="deleteM(index)">删除</button>
				</view>
				<view class="inputBox" style="margin-bottom: 10rpx;" v-if="!canSee">
					<input v-model="item.value" class="infoBoxItemLeft" placeholder="请输入自定义字段内容" />
				</view>
			</view>

			<view v-if="item.type == 'img'">
				<view class="title">
					<div class="titleSub">
						<div v-if="canSee">
							<span class="commonName">{{item.name}}</span>
							:
						</div>
						<div class="titleSubLeft" v-if="!canSee">{{index+1}}.</div>
						<input v-model="item.name" v-if="!canSee" class="infoBoxItemLeft" placeholder="请输入自定义图片名称" />
					</div>
					<button v-if="!canSee" class="deleteButton" @click="deleteM(index)">删除</button>
				</view>
				<photoUploadMuch :canSee="canSee" v-model="item.value" :key="index" :uploadedPhoto="[1]"
					:index="index" @updateUpload="updateUpload" />
			</view>
		</view>
		<div class="zdyBox" v-if="!canSee">
			<button class="addZdy" @click="addText()">添加自定义文本</button>
			<button class="addZdy" @click="addPic()">添加自定义图片</button>
		</div>
	</view>
</template>

<script>
	import photoUploadMuch from "@/components/photoUploadMuch.vue"
	export default {
		props: {
			list: {
				default: []
			},
			canSee: {
				default: false
			}
		},
		computed: {},
		components: {
			photoUploadMuch
		},
		data() {
			return {
				zdyList: this.list
			};
		},
		methods: {
			inputChange(value) {
				console.log("!!");
			},
			addText() {
				this.zdyList.push({
					type: 'text',
					name: '',
					value: ''
				})
				this.$emit('update', this.zdyList)
			},
			addPic() {
				this.zdyList.push({
					type: 'img',
					name: '',
					value: ''
				})
				this.$emit('update', this.zdyList)
			},
			deleteM(i) {
				this.zdyList = this.zdyList.filter((value, index) => index !== i);
				this.$emit('update', this.zdyList)
			},
			updateUpload(url, index) {
				this.zdyList[index].value = url;
				this.$emit('update', this.zdyList)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.zdyBox {
		display: flex;
		justify-content: flex-start;
		margin-top: 25rpx;
	}

	.addZdy {
		width: 200rpx;
		font-size: 20rpx;
		background-color: #4aac94;
		color: #fff;
	}

	.deleteButton {
		font-size: 20rpx;
		margin-left: 0;
		margin-right: 0;
	}

	.inputBox {
		width: calc(100% - 164rpx);
		background: #FFFFFF;
		border-radius: 13rpx 13rpx 13rpx 13rpx;
		opacity: 1;
		border: 1rpx solid #EEEEEE;
		margin-left: 40rpx;
		margin-right: 40rpx;
		padding-left: 20rpx;
		padding-right: 42rpx;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		margin-bottom: 30rpx;
		font-size: 10rpx;

		.infoBoxItemLeft {
			font-size: 23rpx;
			flex: 1;
		}
	}

	.title {
		padding-left: 40rpx;
		padding-right: 40rpx;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.titleSub {
		display: flex;
		align-items: center;
	}

	.titleSubLeft {
		font-size: 30rpx;
		margin-right: 10rpx;
	}
</style>